<template>
  <div class>
    <naviHeader></naviHeader>
    <div class="margin-bottem">
      <div>
        <!-- <audio src="../../bgm/HappyTogether.mp3"></audio> -->
        <img class="cover" v-bind:src="imgBaseUrl + albumDetail.coverUrl" alt>
      </div>

      <div class="info">
        <div class="title">{{albumDetail.name}}</div>
        <div class="total">
          <div class="border-right">{{albumDetail.buyNumber}}人购买</div>
          <div>领取积分</div>
        </div>
      </div>

      <!-- <div class="flex-contianer">
        <div>积分可抵用￥3.00元</div>
      </div> -->

      <div class="tab">
        <div
          class="item"
          v-bind:class="[showItem === 'info' ? 'border-bottom' : '']"
          v-on:click="showItem = 'info'"
        >专栏详情</div>
        <div
          class="item"
          v-bind:class="[showItem === 'list' ? 'border-bottom' : '']"
          v-on:click="showItem = 'list'"
        >目录</div>
      </div>

      <div v-if="showItem === 'info'">
        <!-- <div class="content">
          {{albumDetail.content}}
          </div> -->

        <div class="content">
          <p v-html="albumDetail.content"></p>
        </div>
      </div>

      <div class="list-container" v-if="showItem === 'list'">
        <div v-for="item in list" :key="item.index">
          <router-link :to="{name: 'course', params: {id: item.id}}">
            <div class="list-item">
              <div>
                <img class="poster" v-bind:src="imgBaseUrl + item.coverUrl" alt>
              </div>
              <div>
                <div class="title">{{item.name}}</div>
                <div class="total" v-if="!albumDetail.free">
                  <div>{{item.buyNumber}}人购买</div>
                  <div class="price">{{item.price}}</div>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <div class="footer" v-if="!albumDetail.free">
      <div class="flex-container">
        <div class="price">{{albumDetail.price}}</div>
      </div>

      <div class="btn"> 单买</div>
    </div>
  </div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import {
  getAlbumDetail,
  getAlbumCourseList,
  getComment
} from "../../service/getData";
import { imgBaseUrl } from "../../config/env";

export default {
  data() {
    return {
      albumDetail: {
        coverUrl: "",
        name: "",
        price: 0,
        buyNumber: 0,
        person: 0,
        content: ""
      },

      imgBaseUrl: imgBaseUrl,

      showItem: "list",
      list: [
        {
          coverUrl: "",
          name: "",
          buyNumber: "",
          price: 0
        }
      ]
    };
  },

  mounted() {
    this.init();
  },
  components: {
    naviHeader
  },
  methods: {
    init: function() {
      // 专栏详细信息
      getAlbumDetail(this.$store.userToken, this.$route.params.id).then(res => {
        res.content = res.content.replace("<p>", "").replace("</p>", "");

        this.albumDetail = res;
      });

      // 专栏课程列表
      getAlbumCourseList(this.$store.userToken, this.$route.params.id).then(
        res => {
          this.list = res.content;
        }
      );

    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.margin-bottem {
  margin-bottom: 1rem;
}

.cover {
  height: 3.6rem;
  width: 7.5rem;
}

.tab {
  @include fj(space-around);
  background: #fff;
  border-bottom: 2px solid #f1f1f1;

  .item {
    height: 1rem;
    line-height: 1rem;
    width: 2rem;
    text-align: center;
  }

  .border-bottom {
    border-bottom: 2px solid #16e08f;
  }
}

.content{
  @include sc(0.28rem, #999);
  padding: 0.2rem;
  background: #fff;
}

.info {
  padding: 0.2rem;
  background: #fff;
  border-bottom: 2px solid #f1f1f1;

  .title {
    @include sc(0.4rem, #000);
    padding: 0.2rem 0;
  }

  .price {
    color: #049009;
    margin: 0rem 0.1rem;
    font-size: 0.35rem;
  }

  .price::before {
    content: "￥";
    font-size: 0.28rem;
  }

  .total {
    @include fj(flex-start);

    div {
      @include sc(0.26rem, #888);

      margin-top: 0.2rem;
      text-align: center;
      padding: 0.1rem 0.2rem;
    }

    .border-right {
      border-right: 2px solid #f1f1f1;
    }
  }
}

.flex-contianer {
  @include sc(0.26rem, #888);
  @include fj(flex-start);

  border-bottom: 2px solid #f1f1f1;
  background: #fff;
}

  .price {
    color: #049009;
    margin: 0rem 0.1rem;
    font-size: 0.35rem;
  }

  .price::before {
    content: "￥";
    font-size: 0.28rem;
  }

.flex-contianer > div {
  color: #888;
  padding: 0.2rem;
}

.list-container {
  background: #fff;

  .list-item {
    @include fj(flex-start);
    margin: 0.2rem 0.1rem 0.2rem 0.1rem;

    .poster {
      width: 3.5rem;
      height: 2.6rem;
      margin: 0rem 0.1rem;
    }

    .title {
      font-size: 0.34rem;
      height: 2rem;
      padding: 0.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .total {
      @include fj(space-between);

      .price {
        color: #049009;
        margin: 0rem 0.1rem;
        font-size: 0.35rem;
      }

      .price::before {
        content: "￥";
        font-size: 0.28rem;
      }
    }
  }
}

.footer {
  @include fj(space-between);
  align-items: center;
  padding: 0.2rem;
  background: #fff;
  width: 7.5rem;
  border-top: 2px solid #f1f1f1;

  position: fixed;
  bottom: 0;
  left: 0;

  .flex-container {
    @include fj(space-between);
    width: 2.4rem;

    .flex-item {
      width: 1rem;
      text-align: center;

      img {
        width: 0.6rem;
        height: 0.6rem;
      }

      .name {
        @include sc(0.24rem, #888);
      }
    }
  }

  .btn {
    color: #fff;
    background: #16e08f;
    padding: 0.2rem;
    border-radius: 25px;
  }
}
</style>

